伪元素
# 伪元素
相当于元素的子元素
<span></span>。 [TOC]
# 一、尽可能使用伪元素
使用场景：画图（分割线、点之类的元素）
:after/::after和:before/::before是伪元素:hover/:active是伪类::before/::after是CSS3中的写法，为了将伪类和伪元素区分开。但是平时为了兼容性，还是会用一个冒号的写法。- 两个伪元素下特有的属性
content，用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。content属性与:before及:after伪元素配合使用，来插入生成内容。 img/input等单标签无伪元素
# 二、特点
- 无法用js获取，不会增加js查DOM的负担，加快浏览器加载HTML文件，仅仅是在 CSS 渲染层加入。(并不存在于dom中，只存在页面中)
- 可用css控制，动态添加删除类
# 三、案例
# 3.1 划分割线
<p class="partition">这是一条分割线</p>
.partition {
text-align: center;
}
/* .partition与:before之间不要有空格 */
.partition:before,
.partition:after {
content: '';
/* 强制display:block,即使display:table-cell也无用 */
position: absolute;
top: 24px;
/* width: 600px; */
width: 40%;
height: 2px;
background: #ccc;
}
.partition:before {
left: 12px;
}
.partition:after {
right: 12px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
- 渲染出来的结构如下
<p class="partition">
::before
"这是一条分割线"
::after
</p>
1
2
3
4
5
2
3
4
5
# 3.2 清除浮动
如果子元素都浮动，则父元素无高度。
浮动仍占正常文档流空间，实现图片环绕文字。
.clear:after{
content="";
display:"zhi";
clear:both;
}
1
2
3
4
5
2
3
4
5
# 3.3 特殊效果
a.替代：input和select(创建下拉列表)的禁掉,使得输入框查看时的不可点不可输。
<form> <input type="text" value="不可点不可输" /></form>
form:after {
content: "";
position: absolute;
top: 0;
left: 0;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 3.4 利用content展示图表文字
<div class="choose">
<label><input type="checkbox"/>我最帅</label>
<label><input type="checkbox"/>我最酷</label>
</div>
<p>你选择了<span class="count"></span>个框</p>
1
2
3
4
5
2
3
4
5
.choose {
/* counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。 */
/* 计数器名称：jenny */
counter-reset: jenny;
}
.choose input:checked {
/* counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。 */
counter-increment: jenny;
}
.count:before {
content: counter(jenny);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 四、伪类
- 诸如此类，p:first-of-type 选择属于其父元素的首个元素。
伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。